<template>
  <div id="banner" @mouseover="showset" @mouseout="hideset">
    <div class="header">
      <div class="banner_con" :style="{visibility:ifhidden,color:bandata.fontcolor}">
        <div class="information">
          <div class="name">{{taskdata.ActivityTitle}}</div>
          <div class="timeadress">
            <div class="time">
              <i class="iconfont icon-activity_fill"></i>
              <span> 时间 </span> {{taskdata.StartTime}} ~ {{taskdata.EndTime}} </div>
            <div class="adress">
              <i class="iconfont icon-coordinates_fill"></i>
              <span> 地址 </span> {{taskdata.FullAddress}}</div>
            <div class="time" v-show="taskdata.CutOffTime">
              <i class="iconfont icon-clock_fill"></i>
              <span> 报名截止 </span> {{taskdata.CutOffTime}} </div>
          </div>
          <div class="or" v-show="taskdata.Sponsor.length&&taskdata.Sponsor[0].Name!=''">
            <i>活动由</i>
            <span v-for="(item,index) in taskdata.Sponsor" class="zhuban"> {{index==0?"":"、" }} {{ item.Name }} </span>
            <i>主办</i>
          </div>
        </div>
        <div class="e_frametop"></div>
        <div class="e_framebottom"></div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">设置</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["bandata", "pagedata", "taskdata"],
    data: function () {
      return {
        maskshow: false
      }
    },
    computed: {
      ifhidden: function () {
        return this.bandata.type == 1 ? 'visible' : 'hidden'
      },
      backurl: function () {
        return 'url(' + this.bandata.background + ')'
      },
      personalCenter: function () {
        return "/Event/Registration/RegisterCertificate?_taskId_=" + this.taskdata.TaskId
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$emit('setmod', 'banner', -1, "BasicModule")
      }
    }
  }
</script>

<style scoped lang="less">
  #banner {
    position: relative;
  }

  #banner .header {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
  }

  #banner .header .information {
    padding: 25px 16px 55px;
  }

  #banner .header .information .name {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: bold;
  }

  #banner .header .information .timeadress {
    font-size: 12px;
    margin-bottom: 8px;
  }

  #banner .header .information .timeadress .time {
    margin-bottom: 3px;
  }

  #banner .header .information .or {
    font-size: 12px;
  }
</style>